<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框架搭建</title>
<script src="./lib/vue2.6.11.js" ></script>
<style>
	.active {
		background: #a10;
	}
</style>
</head>

<body>
	<div id="app">
		<div>您要去哪里?</div>
		<!--multiple 多选需要添加一个这个属性-->
		<select v-model="dest" multiple>
			<option value="1">王家沟</option>
			<option value="2">背背山</option>
		</select>

		<div></div>
		<div>您来自哪里? </div>
		<select v-model="from">
			<option value="1">王家沟</option>
			<option value="2">背背山</option>
		</select>

		<div></div>
		<textarea v-model="article"></textarea>
		<div></div>
		<label>
			男
			<input v-model="sex1"  value="male" type="radio">
			女
			<input v-model="sex1"  value="female" type="radio">
		</label>

		<div></div>
		<label>
			爱好
			<input v-model="sex2"  value="male" type="checkbox">
			女
			<input v-model="sex2"  value="female" type="checkbox">
		</label>
		{{sex2}}
		<div></div>


		<!-- v-on 绑定事件
		 onClick 绑定事件的函数,如果有参数, 可以写为onClick(a,b),定义在methods里面
		 可以直接绑定多个事件,方法必须得有, 不然就会报错
		 v-on可以简写为@
		 -->
		<button v-on="{ mouseenter: onEnter, mouseleave: onOut }" v-on:click="onClick">点我</button>
         <!--$event 用这个关键词, vue你传的是一个事件对象-->
		<!--v-on:keyup="onKey" 怎么判断回车键呢, 只需要加一个enter-->
		<form  @keyup.enter="onEnter" @submit.prevent="onSubmit">
			<input type="text">
			<button type="submit">提交</button>
		</form>

        <div>
        	<!-- v-bind 用户绑定数据和元素属性的 -->
			<!-- v-bind:class="class"  绑定一个类 -->
			<!--  v-bind:href="url"  绑定一个url -->
			<!-- <img v-bind:src="img">  绑定一个图片地址 -->
			<!-- active:isActive  active 键名, 你要添加的类, 值isActive,是你要在什么情况下添加,true添加,false不添加 -->
			<!-- 通常v-bind需要省略掉, 简写为 :class -->
        	<a :class="{ active: isActive }" v-bind:href="url">
				点我
				<!--<img v-bind:src="img">-->
			</a>
        </div>

	    <div>
	        <!-- v-model vue定义的自定义属性,叫指令,下面的意思是把input的值指到name属性中 -->
			<!-- v-model.trim  去输入的前后部分空格 -->
	        <input type="text" v-model.trim="name">
	        <span v-if="name"><pre>您的名字是: {{ name }}</pre></span>
	    </div>
	    <div>
			<!--  v-model.lazy  惰性绑定更新,只有输入完, 才更新绑定 -->
	        <input type="text" v-model.lazy="age">
	         <!-- v-if="age"指定的意思: age, 显示下面这个元素, 不存在,不显示 -->
	        <span v-if="age">您的年龄是: {{ age }}</span>	    	
	    </div>
	    <div>
			<!--v-model.number  填写的数字字符串会转化成数字-->
		    <input type="text" v-model.number="sex">
		    <!-- v-show="sex"指定的意思: sex存在, 显示下面这个元素, 不存在,不显示 -->
	        <span v-show="sex">您的性别是: {{ sex }}</span>	    	
	    </div>
	     <div>
		    <ul>
		    	<li v-for="food in foodList"> {{food}} </li>
		    </ul>	
	    </div>
	    <div>
		    <ul>
		        <!--v-for 用于迭代的一个指令  -->
		    	<li v-for="food in food"> 菜: {{food.name}} , ¥:{{ food.discount ? food.price * food.discount : food.price }} </li>
		    </ul>	
	    </div>

	</div>

</body>
</html>

<script src="./js/main.js" ></script>
<!-- 
v-if和v-show的区别
v-if隐藏, 是dom中永久删除
v-show隐藏, dom中还存在,只是单纯隐藏
 -->
